<!-- 我要下单 -->
<template>
  <div style="padding: 0 16px;">
    <div style="display: flex;align-items: center;justify-content: space-between;padding: 12px 0;">
      <div style="display: flex;">
        <el-input v-model="searchText" placeholder="请输入内容" style="max-width: 220px;margin-right: 16px;" />
        <el-button type="primary" icon="el-icon-search" @click="onSearch">搜索</el-button>
      </div>

      <el-radio-group v-model="tabPosition" @change="changeRadioButton">
        <el-radio-button label="user">用户</el-radio-button>
        <el-radio-button label="master">师傅</el-radio-button>
      </el-radio-group>
    </div>
    <master_table :tabPosition="tabPosition" :dataList="dataList" @refreshList="getUserMasterList"/>
    <pagination v-show="total>0" :total="total" :page.sync="pageParams.pageIndex" :limit.sync="pageParams.pageSize" @pagination="getUserMasterList" />
  </div>
</template>

<script>
import master_table from './table.vue';
import Pagination from '@/components/Pagination';
import { queryUserMasterList } from '@/api/yzUser';

export default {
  components: {
    master_table,
    pagination: Pagination
  },
  data() {
    return {
      activeName: 'first',
      name: '我要下单',
      tabPosition: 'master',
      searchText: '',
      dataList: [],
      pageParams: { pageIndex: 0, pageSize: 10 },
      total: 0
    }
  },
  mounted() {
    this.getUserMasterList();
  },
  methods: {
    changeRadioButton(tab) {
      this.tabPosition = tab;
    },
    async getUserMasterList() {
      // console.log('pageParams', this.pageParams)
      const { data } = await queryUserMasterList({ ...this.pageParams, queryBean: { searchText: this.searchText } });
      if (data.code === 200) {
        this.dataList = data.data.records || [];
        this.total = data.data.total;
      } else {
        this.$message({
          message: data.msg || '列表获取失败',
          type: 'error',
          showClose: true,
          duration: 3000,
        });
      }
    },
    onSearch() {
      // 点击搜索 params: searchText, userTab
      this.getUserMasterList();
    }
  }
}
</script>

<style>
.deleteBorder .el-tabs__nav-wrap::after{
    height: 0;
  }
  .pagination-container {
    float: right;
  }
</style>
